<template>
  <div>
    <div class="box" id="printJS-form">
      <div class="printFormBox">
        <header>
          <img src="./image/logo.png" alt="">
          <p>北京久感科技有限公司<br/>{{propsName}}</p>
        </header>
        <div class="information">
          <div :class="item.style" v-for="item in orderHeader" :key="item.title">
            <span>{{item.title}} - </span>
            <input type="text" :value="item.value">
          </div>
        </div>
        <div class="informationContent">
          <p style="margin: 10px 0;margin-left: 14px;font-size: 12px;font-weight: 600">报价明细：</p>
          <div class="contentLeft">
            <table align='center' style="border-collapse:collapse;border-bottom: 0;border-right: 1px solid">
              <tr>
                <th v-for="(item,index) in tableHeader" :key="index" :width="item.width">
                  {{item.title}}
                </th>
                <th style="border-right: 1px solid">
                  备注
                </th>
              </tr>
              <tr v-for="(item,index) in tableData" :key="index">
                <td>{{index+1}}</td>
                <td v-for="(items,index) in item" :key="index">{{items}}</td>
                <td style="border-right: 1px solid">
                  <input type="textarea" style="border-bottom: 0px;width: 100%;overflow: auto" maxlength="30"/>
                </td>
              </tr>
              <!-- 有优惠时候的总价-->
              <tr class="tr_height_44" v-if="tableFooter.length!==1">
                <td colspan="6" style="border: 0px;border-top:1px solid ;border-left:1px solid ;text-align: right">总价：</td>
                <td colspan="3" style="border-right: 1px solid">
                  {{tableFooter[0]}}元
                </td>
              </tr>
              <tr v-if="tableFooter.length!==1" class="tr_height_44">
                <td  colspan="6" style="border: 0px;text-align: right;border-left:1px solid">优惠金额：</td>
                <td  colspan="3" style="border-right: 1px solid">
                  {{tableFooter[1]}}元
                </td>
              </tr>
              <tr v-if="tableFooter.length!==1" class="tr_height_44" style="border-bottom: 0">
                <td  colspan="6" style="border: 0px;text-align: right;font-size: 14px;font-weight: 600;border-left:1px solid;">实际总价：</td>
                <td  colspan="3" style="border-bottom: 1px solid #333F50;font-size: 14px;font-weight: 600;border-right: 1px solid">
                  {{tableFooter[2]}}元
                </td>
              </tr>
              <!-- 没有优惠时候的总价-->
              <tr v-if="tableFooter.length===1"
                  style="text-align: right;text-align: center;align-items: center;">

                <td colspan="6" width="100" style="text-align: right;valign:middle;font-size: 14px;font-weight: 600;border-bottom: 1px solid">
                  实际总价：
                </td>
                <td colspan="2" valign="middle"
                    style="text-align: left;border-bottom: 1px solid;font-size: 14px;font-weight: 600;padding-left: 24px;box-sizing: border-box;border-right: 1px solid">
                  {{tableFooter[0]}}元
                </td>
              </tr>
              <tr style="border-bottom: 1px solid">
                <td colspan="2" style="text-align: left;overflow: hidden;text-align: right">
                  备注：
                </td>
                <td colspan="7" style="text-align: left;overflow: hidden;text-align: left;box-sizing: border-box;padding-left: 16px">
                  {{data.explanation}}
                </td>
              </tr>
            </table>
            <div  style="width: 100%;line-height: 20px;transform:translateY(10px);font-size: 10px;padding-left: 20px ">
              <span style="font-size: 12px;font-weight:600 ">条款和条例：</span><br>
              <div style="padding-left: 0.5rem">
                1.报价有效期：90日，超过90日请重新询价<br>
                2.交货周期：以实际订单数量双方协商<br>
                3.交货方式：物流或快递，上述价格不含运费<br>
                4.付款方式：50%预付款，提货前全额结清<br>
                5.违约赔偿：按签署合同执行<br>
                6.售后服务：自购货日起1年内买方在正常使用情况下发生非人为因 素的故障问题卖方负责保修或更换<br>
                7.复印件与原件具有同等法律效应
              </div>
            </div>
            <div class="informationFooter">
              <span>单位盖章</span>
              <span>负责人签字：</span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import print from "print-js";

  export default {
    data() {
      return {
        //设置打印的样式
        style: '@page {  } ' + '@media print {  .box {\n' +
          '    width: 100%;\n' +
          '    height: 100%;\n' +
          '    position: relative;\n' +
          '  }\n' +
          '\n' +
          '  .information {\n' +
          '    margin-top: 20px;\n' +
          '    width: 100%;\n' +
          '    display: flex;\n' +
          '    justify-content: space-between;\n' +
          '    align-items: center;\n' +
          '    flex-wrap: wrap;\n' +
          '    box-sizing: border-box;\n' +
          '    padding: 0 2%;\n' +
          '    margin-bottom: 20px;\n' +
          '  }\n' +
          '\n' +
          '  .information span {\n' +
          '    font-weight: 600;\n' +
          '  }\n' +
          '\n' +
          '  .table_header_50 {\n' +
          '    width: 60%;\n' +
          '    height: 20px;\n' +
          '    line-height: 20px;\n' +
          '    font-size: 10px;\n' +
          '  }\n' +
          '\n' +
          '  .table_header_40 {\n' +
          '    width: 40%;\n' +
          '    height: 20px;\n' +
          '    line-height: 20px;\n' +
          '    font-size: 10px;\n' +
          '  }\n' +
          '\n' +
          '  .table_header_arr, .table_header_100 {\n' +
          '    width: 100%;\n' +
          '    height: 20px;\n' +
          '    line-height: 20px;\n' +
          '    font-size: 10px;\n' +
          '  }\n' +
          '\n' +
          '  .table_header_arr > input {\n' +
          '    width: 80%;\n' +
          '  }\n' +
          '\n' +
          '  input {\n' +
          '    border: none;\n' +
          '    background: transparent;\n' +
          '    font-size: 10px;\n' +
          '  }\n' +
          '\n' +
          '  .table_header_50 input {\n' +
          '    width: 71%;\n' +
          '  }\n' +
          '\n' +
          '  .table_header_40 input {\n' +
          '    width: 40%;\n' +
          '  }\n' +
          '\n' +
          '  .informationContent {\n' +
          '    width: 100%;\n' +
          '    position: relative;\n' +
          '\n' +
          '    border-top: 2px dashed #333F50;\n' +
          '  }\n' +
          '\n' +
          '  .informationContent table {\n' +
          '    width: 96%\n' +
          '  }\n' +
          '\n' +
          '  .informationContent table {\n' +
          '    border-right: 1px solid #333F50;\n' +
          '    border-bottom: 1px solid #333F50\n' +
          '  }\n' +
          '\n' +
          '  .informationContent table th {\n' +
          '    border-left: 1px solid #333F50;\n' +
          '    border-top: 1px solid #333F50;\n' +
          '    padding: 4px 0;\n' +
          '    font-size: 10px;\n' +
          '    font-weight: 600;\n' +
          '    backgroundColor: #333F50;\n' +
          '  }\n' +
          '\n' +
          '  .informationContent table tr {\n' +
          '    padding: 0;\n' +
          '    color: #333F50;\n' +
          '  }\n' +
          '\n' +
          '  .informationContent table td {\n' +
          '    border-left: 1px solid #333F50;\n' +
          '    border-top: 1px solid #333F50;\n' +
          '    text-align: center;\n' +
          '    padding: 4px 0;\n' +
          '    font-size: 10px;\n' +
          '    color: #333F50;\n' +
          '  }\n' +
          '\n' +
          '  .informationFooter {\n' +
          '    width: 80%;\n' +
          '    height: 140px;\n' +
          '    box-sizing: border-box;\n' +
          '    padding-left: 10px;\n' +
          '    line-height: 70px;\n' +
          '    box-sizing: border-box;\n' +
          '    flex-wrap: wrap;\n' +
          '    display: flex;\n' +
          '    align-items: center;\n' +
          '    margin-top: 20px;\n' +
          '    justify-content: right;\n' +
          '  }\n' +
          '\n' +
          '  .informationFooter span {\n' +
          '    display: inline-block;\n' +
          '    width: 40%;\n' +
          '  }\n' +
          '\n' +
          '  .span_borderBottom {\n' +
          '    border-bottom: 1px solid #333F50\n' +
          '  }\n' +
          '\n' +
          '  .printFormBox {\n' +
          '    width: 96%;\n' +
          '\n' +
          '  }\n' +
          '\n' +
          '  .printFormBox header {\n' +
          '    width: 100%;\n' +
          '    margin: auto 0;\n' +
          '    border-bottom: 10px #333F50 double;\n' +
          '    text-align: center;\n' +
          '    padding-bottom: 10px\n' +
          '  }\n' +
          '\n' +
          '  header > p {\n' +
          '    display: inline-block;;\n' +
          '    font-size: 30px;\n' +
          '    text-align: center;\n' +
          '    font-weight: 600;\n' +
          '    line-height: 40px;\n' +
          '    color: #333F50;\n' +
          '  }\n' +
          '\n' +
          '  header > img {\n' +
          '    width: 100px;\n' +
          '    height: 80px;\n' +
          '    /*width: 80px;*/\n' +
          '    /*height: 64px;*/\n' +
          '    margin-right: 10px;\n' +
          '    margin-top: 20px;\n' +
          '  }\n' +
          '\n' +
          '  .tr_height_44 {\n' +
          '\n' +
          '  }',
        text: '请输入',
        purchaseData: {},
        // 接收总价
        tableFooter: [],
        //标题
        propsName: '报价单',
        /*订单号*/
        //头部数据
        orderHeader: [
          //table_header_100  样式占一行 table_header_50 占据百分之50 table_header_40 占据百分之40 table_header_arr 地址的样式  具体样式可见app.vue
          {title: '头部标题', value: '标题对应内容', style: 'table_header_50'},
          {title: '头部标题2', value: '标题对应内容', style: 'table_header_arr'},
        ],
        //表单头部内容 width 动态修改th 的宽度
        tableHeader: [{title: '序号', width: '30'},],
        purchase_item: [],
        //设置表单内容
        tableData: [],
        //接受所有数据,
        data: {},
        //  底部内容
        footerData: []

      }
    }, methods: {
      //获取数据
      getData(header, tableHeader, table, tableFooter, propsName, data) {
        this.orderHeader = header
        this.propsName = propsName
        this.tableHeader = tableHeader
        this.tableData = table
        this.data = data
        this.tableFooter = tableFooter
      },
      //打印
      CreateOneFormPage() {
        this.text = ''
        print({
          printable: 'printJS-form', //div id名 指定打印谁
          type: 'html',
          headerStyle: 'margin-top:-20px',
          // targetStyles: ['border', 'padding: 15px'],
          scanStyles: false,
          style: this.style // 表格样式
        })
      },
    }
  }
</script>

<!--打印弹窗界面样式-->
<style scoped>
  .box {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .information {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 2%;
    margin-bottom: 20px;
  }

  .information span {
    font-weight: 600;
  }

  .table_header_50 {
    width: 60%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
  }

  .table_header_40 {
    width: 40%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
  }

  .table_header_arr, .table_header_100 {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
  }

  .table_header_arr > input {
    width: 80%;
  }

  input {
    border: none;
    background: transparent;
    font-size: 10px;
  }

  .table_header_50 input {
    width: 71%;
  }

  .table_header_40 input {
    width: 40%;
  }

  .informationContent {
    width: 100%;
    position: relative;

    border-top: 2px dashed #333F50;
  }

  .informationContent table {
    width: 96%
  }

  .informationContent table {
    border-right: 1px solid #333F50;
    border-bottom: 1px solid #333F50
  }

  .informationContent table th {
    border-left: 1px solid #333F50;
    border-top: 1px solid #333F50;
    padding: 4px 0;
    font-size: 10px;
    font-weight: 600;
    backgroundColor: #333F50;
  }

  .informationContent table tr {
    padding: 0;
    color: #333F50;
  }

  .informationContent table td {
    border-left: 1px solid #333F50;
    border-top: 1px solid #333F50;
    text-align: center;
    padding: 4px 0;
    font-size: 10px;
    color: #333F50;
  }

  .informationFooter {
    width: 80%;
    height: 140px;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 70px;
    box-sizing: border-box;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: right;
  }

  .informationFooter span {
    display: inline-block;
    width: 40%;
  }

  .span_borderBottom {
    border-bottom: 1px solid #333F50
  }

  .printFormBox {
    width: 96%;

  }

  .printFormBox header {
    width: 100%;
    margin: auto 0;
    border-bottom: 10px #333F50 double;
    text-align: center;
    padding-bottom: 10px
  }

  header > p {
    display: inline-block;;
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    line-height: 40px;
    color: #333F50;
  }

  header > img {
    width: 100px;
    height: 80px;
    /*width: 80px;*/
    /*height: 64px;*/
    margin-right: 10px;
    margin-top: 20px;
  }

  .tr_height_44 {

  }
</style>


